@tailwind base;
@tailwind components;
@tailwind utilities;

/* 全局基础样式 */
@layer base {
  /* 重置和基础样式 */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    padding: 0;
    background-color: theme('colors.white');
    color: theme('colors.gray.900');
    font-feature-settings: 'cv03', 'cv04', 'cv11';
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  /* 深色模式 */
  .dark body {
    background-color: theme('colors.gray.900');
    color: theme('colors.gray.100');
  }

  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: theme('colors.gray.100');
    border-radius: 4px;
  }

  .dark ::-webkit-scrollbar-track {
    background: theme('colors.gray.800');
  }

  ::-webkit-scrollbar-thumb {
    background: theme('colors.gray.300');
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: theme('colors.gray.400');
  }

  .dark ::-webkit-scrollbar-thumb {
    background: theme('colors.gray.600');
  }

  .dark ::-webkit-scrollbar-thumb:hover {
    background: theme('colors.gray.500');
  }

  /* 选择文本样式 */
  ::selection {
    background-color: theme('colors.primary.100');
    color: theme('colors.primary.900');
  }

  .dark ::selection {
    background-color: theme('colors.primary.800');
    color: theme('colors.primary.100');
  }

  /* 焦点样式 */
  :focus-visible {
    outline: 2px solid theme('colors.primary.500');
    outline-offset: 2px;
  }

  /* 链接样式 */
  a {
    color: theme('colors.primary.600');
    text-decoration: none;
    transition: color 0.2s ease;
  }

  a:hover {
    color: theme('colors.primary.700');
    text-decoration: underline;
  }

  .dark a {
    color: theme('colors.primary.400');
  }

  .dark a:hover {
    color: theme('colors.primary.300');
  }

  /* 标题样式 */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
  }

  h1 {
    font-size: 2.25rem; /* 36px */
  }

  h2 {
    font-size: 1.875rem; /* 30px */
  }

  h3 {
    font-size: 1.5rem; /* 24px */
  }

  h4 {
    font-size: 1.25rem; /* 20px */
  }

  h5 {
    font-size: 1.125rem; /* 18px */
  }

  h6 {
    font-size: 1rem; /* 16px */
  }

  /* 段落样式 */
  p {
    margin: 0;
    line-height: 1.6;
  }

  /* 按钮重置 */
  button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }

  /* 输入框重置 */
  input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
  }

  /* 图片样式 */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* 列表样式 */
  ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* 表格样式 */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    text-align: left;
    padding: 0;
  }
}

/* 组件样式 */
@layer components {
  /* 容器样式 */
  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8;
    max-width: 1280px;
  }

  /* 卡片样式 */
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-soft border border-gray-200 dark:border-gray-700;
  }

  .card-hover {
    @apply card transition-all duration-200 hover:shadow-medium hover:-translate-y-1;
  }

  /* 按钮基础样式 */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
  }

  .btn-secondary {
    @apply btn bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600;
  }

  .btn-outline {
    @apply btn border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800;
  }

  /* 输入框样式 */
  .input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:placeholder-gray-500;
  }

  .input-error {
    @apply input border-red-300 focus:ring-red-500 focus:border-red-500;
  }

  /* 标签样式 */
  .label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
  }

  /* 错误文本样式 */
  .error-text {
    @apply text-sm text-red-600 dark:text-red-400 mt-1;
  }

  /* 帮助文本样式 */
  .helper-text {
    @apply text-sm text-gray-500 dark:text-gray-400 mt-1;
  }

  /* 加载动画 */
  .loading-spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary-600;
  }

  /* 骨架屏样式 */
  .skeleton {
    @apply bg-gray-200 dark:bg-gray-700 animate-pulse rounded;
  }

  /* 分割线样式 */
  .divider {
    @apply border-t border-gray-200 dark:border-gray-700;
  }

  /* 徽章样式 */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-primary {
    @apply badge bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-100;
  }

  .badge-secondary {
    @apply badge bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100;
  }

  /* 工具提示样式 */
  .tooltip {
    @apply absolute z-50 px-2 py-1 text-sm text-white bg-gray-900 rounded shadow-lg pointer-events-none;
  }
}

/* 工具类 */
@layer utilities {
  /* 文本截断 */
  .text-ellipsis {
    @apply truncate;
  }

  .text-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .text-ellipsis-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 隐藏滚动条 */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* 玻璃效果 */
  .glass {
    @apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm;
  }

  /* 渐变文本 */
  .text-gradient {
    @apply bg-gradient-to-r from-primary-600 to-purple-600 bg-clip-text text-transparent;
  }

  /* 安全区域 */
  .safe-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-left {
    padding-left: env(safe-area-inset-left);
  }

  .safe-right {
    padding-right: env(safe-area-inset-right);
  }
}
